<template>
    <div>
  <NavBar></NavBar>  
<div class="box" style="background-color:#204d8a ; width: 100%;
height: 40px;">
<span><van-icon name="gem-o" />官方正品</span>
<span><van-icon name="free-postage" />极速物流</span>
<span><van-icon name="gold-coin-o" />全国联保</span>
<span><van-icon name="like-o" />免费定制</span>
</div>

<Tag></Tag>
<van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>
<van-grid :column-num="4">
  <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
</van-grid>
<Ms></Ms>
    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
import Tag from '@/components/Tag.vue';
import Ms from '@/components/Ms.vue';
import { ref } from 'vue';
import { catitemsApi } from '@/api/api';
const catitemsApiData=ref([])
catitemsApi().then(res=>{
    console.log(res);
    catitemsApiData.value=res.data.message
})
</script>

<style lang="scss" scoped>
.box{
  span{
    color: #ffffff;
    display: inline-block;
    padding-top:6px ;
    margin:0 10px 10px  10px;
  }
}
</style>